<link rel="stylesheet" href="/static/orgchart/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/orgchart/css/jquery.orgchart.css">
<link rel="stylesheet" href="/static/orgchart/css/style.css">
<div id="chart-container"></div>
<script type="text/javascript" src="/static/orgchart/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/orgchart/js/jquery.mockjax.min.js"></script>
<script type="text/javascript" src="/static/orgchart/js/jquery.orgchart.js"></script>
<style type="text/css">
    .orgchart { background: #fff; }
    .orgchart td.left, .orgchart td.right, .orgchart td.top { border-color: #aaa; }
    .orgchart td>.down { background-color: #aaa; }
    .orgchart .product-dept .title { background-color: #006699; }
    .orgchart .product-dept .content { border-color: #006699; }
    .orgchart .product-green .title { background-color: #4caf50; }
    .orgchart .product-green .content { border-color: #006699; }
    .orgchart .product-blue .title { background-color: #0084ff; }
    .orgchart .product-blue .content { border-color: #006699; }
    .orgchart .product-orange .title { background-color: #ff9607; }
    .orgchart .product-orange .content { border-color: #006699; }
    .orgchart .rd-dept .title { background-color: #993366; }
    .orgchart .rd-dept .content { border-color: #993366; }
    .orgchart .pipeline1 .title { background-color: #996633; }
    .orgchart .pipeline1 .content { border-color: #996633; }
    .orgchart .frontend1 .title { background-color: #cc0066; }
    .orgchart .frontend1 .content { border-color: #cc0066; }
</style>
<script type="text/javascript">
    $(function() {
        $.mockjax({
            url: '/orgchart/initdata',
            responseTime: 1000,
            contentType: 'application/json',
            responseText: {
                {{$content}}
            }
    });

        $('#chart-container').orgchart({
            'data' : '/orgchart/initdata',
            'nodeContent': 'title'
        });

    });
</script>